<template>
	<view>
		<u-navbar title="合成活动" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#666" titleStyle="color:#333" bgColor="#E0DDDA" rightText="合成记录" @rightClick="right"
			@leftClick="leftClick"></u-navbar>
		<view class="tab-nav">
			<view class="tab-list-item" v-for="(item,index) in toggleList" :key="item.id"
				@click="clickToggleHandle(item,index)">
				<view :class="{ active: indexs==index}" class="text">{{ item.label }}</view>
			</view>
		</view>
		<view class="zone flex_Z" v-if="indexs==0" v-for="(item,index) in zoneList" :key="item.id"
			@click="goDetail(item.id)">
			<view class="zone_box">
				<image :src="item.image" mode="aspectFill"></image>
				<text class="hall_state">{{item.status_desc}}</text>
				<!-- 				<text class="hall_state">进行中</text>
				<text class="hall_state">已结束</text> -->
			</view>
			<text class="zone_text">{{item.name}}</text>
		</view>
		<noDatas :xxxList="zoneList" :status="status"></noDatas>
		<view class="main" :style="zoneList.length==1 ? itemstyle1 : itemstyle " v-if="indexs==1">
			<view class="mainitem" v-for="(item,index) in zoneList" :key="item.id" @click="godetail2(item.id,item.type)">
				<image class="images" :src="item.image" mode=""></image>
				<view class="tagssss">
					{{item.status_desc}}
				</view>
				<view class="time">
					<text>{{item.start_time}}</text>
					<image src="/static/image/timess.png" mode=""></image>
				</view>
				<view class="name">
					{{item.name}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		activityList
	} from '../../api/other.js'
	export default {
		data() {
			return {
				page: 1,
				size: 20,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				zoneList: [],
				toggleList: [{
						label: '碎片合成',
						// select: true
					}, {
						label: '藏品合成',
						// select: false
					}

				],
				indexs: 0,
				itemstyle:"justify-content: space-between;",
				itemstyle1:"justify-content: flex-start;",
			}
		},
		onLoad() {
			this.initList()
		},
		methods: {
			clickToggleHandle(ele, index) {
				this.indexs = index
				this.toggleList.forEach(item => item.select = false)
				// this.currLabel = ele.label
				ele.select = true
				console.log(ele)
				this.selval = ele.label
				this.page = 1
				this.initList()
			},
			right() {
				uni.navigateTo({
					url: "/pagesMy/debris/debrislisttwo"
				})
			},

			leftClick() {
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			initList() {
				// console.log(this.brandId);

				let data = {
					type: this.indexs + 1,
					page: this.page,
				};
				activityList(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.list.data;
						this.zoneList = this.page == 1 ? list : this.zoneList.concat(list);
						console.log(this.zoneList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pagesMy/debris/debrisdetail?id=' + id
				})
			},
			godetail2(id,type) {
				if(type==3){
					uni.navigateTo({
						url:'/pagesMy/debris/cpdebrisdetailtwo?id=' + id
					})
				}
				if(type==2){
					uni.navigateTo({
						url: '/pagesMy/debris/cpdebrisdetail?id=' + id
					})
				}
				
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1
				that.zoneList = []
				that.initList()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		width: 710rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 60rpx;
		// height: 460rpx;
		// background: #B7A184;
		// border: 2rpx solid #AA8E6A;
	}

	.mainitem {
		border-radius: 10rpx;
		width: 340rpx;
		height: 460rpx;
		background: #B7A184;
		border: 2rpx solid #AA8E6A;
		border-top: none;
		position: relative;
		// margin-left: 12rpx;
	 //    margin-right: 14rpx;
		margin-bottom: 26rpx;
		
		.tagssss {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			width: 138rpx;
			height: 54rpx;
			background: #66553D;
			border-top-right-radius: 10rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 54rpx;

		}

		.images {
			width: 336rpx;
			height: 382rpx;
			display: block !important;
		}

		.name {
			width: 320rpx;
			height: 78rpx;
			margin-left: 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 78rpx;
			  white-space: nowrap;       /* 不允许换行 */
			  overflow: hidden;          /* 隐藏超出的文本 */
			  text-overflow: ellipsis;   
		}

		.time {
			position: absolute;
			top: 78rpx;
			left: 0rpx;
			width: 158rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;

			>image {
				width: 158rpx;
				height: 50rpx;
			}

			>text {
				width: 158rpx;
				position: absolute;
				left: 50%;
				// top: 50%;
				transform: translate(-50%);
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				z-index: 9;
			}
		}
	}

	.tab-nav {
		width: 750rpx;
		height: 100rpx;
		background-color: #E0DDDA;
		// margin-left: 20rpx;
		display: flex;
		align-items: center;
		position: fixed;
		z-index: 999;

		.tab-list-item {
			position: relative;
			width: 350rpx;

			.text {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 50rpx;
				padding: 20rpx;
				height: 52rpx;
				opacity: 1;
				font-weight: 500;
				text-align: center;
				font-size: 32rpx;
				color: #A6A5AF;
			}

			.active {
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #A68A64;
			}
		}
	}

	.zone {
		width: 690rpx;
		height: 400rpx;
		margin: 100rpx auto;
		background: #ffffff;
		border-radius: 20rpx;
	}

	.zone_box {
		position: relative;
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
	}

	.zone_box>image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.hall_state {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		color: #ffffff;
		padding: 12rpx 28rpx;
		background: #00000080;
		border-radius: 0 0 10rpx 0;
		/* background: rgba(255, 255, 255 0.1); */
		border-top-left-radius: 20rpx;
	}

	.zone_text {
		padding: 20rpx 24rpx 0;
		font-size: 36rpx;
		color: #333333;

	}
</style>